<template>
  <div>
    <el-table ref="tableRef" :height="tableHeight" :data="list" v-loading="loading">
      <el-table-column label="图片" width="300px">
        <template #default="{ row, $index }">
          <div class="floorInfoImg">
            <el-upload class="avatar-uploader" accept=".png,.jpg,.jpeg" @click="clickUpload(row, $index)" :action="actionUrl" :headers="headers" :show-file-list="false" :before-upload="onBeforeUpload" :on-success="onUploadSuccess">
              <div v-if="row.floorInfoImg">
                <img :src="row.floorInfoImg" class="avatar" />
              </div>
              <div v-else class="tip">
                <el-icon><Plus /></el-icon>
                <span class="addCont">添加图片</span>
              </div>
            </el-upload>

            <Link label="查看" v-if="row.floorInfoImg" @click="onShowImgClick(row.floorInfoImg)" style="margin-left: 16px" :underline="false"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="链接">
        <template #default="{ row }">
          <Link v-if="row.floorInfoName" :label="row.floorInfoUrl == '跳转店铺' ? '店铺' : '商品' + '链接:' + row.floorInfoName" @click="onSelectClick(row)" :underline="false"/>
          <Link v-else label="选择链接" @click="onSelectClick(row)" :underline="false"/>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <Link label="上移" @click="onMoveUpClick(scope.$index)" :class="{ moveUp: scope.$index === 0 }" :disabled="scope.$index === 0" :underline="false"/>
          <Link label="下移" @click="onMoveDownClick(scope.$index)" :class="{ moveDown: scope.$index === list.length - 1 }" :disabled="scope.$index === list.length - 1" :underline="false"/>
          <Link label="删除" v-if="activeName === 'banner' || activeName === 'goodsrefer'" @click="onDelClick(scope.$index)" :disabled="list.length === 1" :underline="false"/>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-image-viewer ref="previewViewer" v-if="showImageViewer" @close="closeImgView" :url-list="srcList" />

  <SelectLink v-model:visible="selectedVisible" @change="onSelectChange" />
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { calcTableHeight } from '@/assets/js/utils'
import { apiBasePath } from '@/api/config'
import Link from '@/components/button/link.vue'
import SelectLink from './components/link.vue'

const { tableRef, tableHeight } = calcTableHeight()

const props = defineProps(['list', 'loading', 'activeName', 'activeName'])
const emit = defineEmits(['up', 'down', 'remove', 'change'])

const actionUrl = apiBasePath + '/medinstrument/boss/uploadSingleFile'
const headers = {
  Authorization: 'Bearer  ' + localStorage.getItem('_boss_token')
}

const floorData = reactive({
  currentFloor: {
    floorInfoImg: '',
    floorInfoUrl: '',
    floorInfoName: '',
    floorInfoVal: '',
    sort: ''
  }
})

const previewViewer = ref()
const showImageViewer = ref(false)
const srcList = ref([])
const selectedVisible = ref(false)

const onBeforeUpload = (file) => {
  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
  const isLt1M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传jpg/png/jpeg文件!')
  }
  if (!isLt1M) {
    ElMessage.error('上传图片大小不能超过10MB!')
  }
  return isJPG && isLt1M
}

const onUploadSuccess = (file) => {
  floorData.currentFloor.floorInfoImg = file.data
}
const clickUpload = (row) => {
  floorData.currentFloor = row
}

const onSelectClick = (row) => {
  selectedVisible.value = true
  floorData.currentFloor = row
}

const onSelectChange = (row) => {
  if (row.goodsId) {
    floorData.currentFloor.floorInfoVal = row.goodsId
    floorData.currentFloor.floorInfoName = row.goodsName
    floorData.currentFloor.floorInfoUrl = '跳转商品'
  } else {
    floorData.currentFloor.floorInfoVal = row.supplierId
    floorData.currentFloor.floorInfoName = row.supplierName
    floorData.currentFloor.floorInfoUrl = '跳转店铺'
  }
}

const onMoveUpClick = (index) => {
  emit('up', index)
}
const onMoveDownClick = (index) => {
  emit('down', index)
}
const onDelClick = (index) => {
  emit('remove', index)
}

const onShowImgClick = (url) => {
  srcList.value = [url]
  showImageViewer.value = true
}

const closeImgView = () => {
  showImageViewer.value = false
}
</script>

<style scoped lang="scss">
.floorInfoImg {
  display: flex;
  align-items: center;

  .tip {
    display: flex;
    align-items: center;

    .addCont {
      color: var(--color-primary);
      margin-left: 5px;
    }
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  width: 208px;
  height: 66px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
}

.el-link.moveUp,
.el-link.moveDown {
  color: #c0c4cc !important;
}
</style>
